/*
* @Author: Ez Lou
* @Email:  ezlou@bitasset.com
* @Date:   2019-12-16 13:43:52
*/

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin')


const env = process.env.NODE_ENV
const isProd = env === 'production'

function resolve(dir){
  // return path.join(__dirname, '..', dir)
  return path.join(__dirname, dir)
}

console.log(resolve('src/images'))

module.exports = {
  mode:env,
  // context:path.join(__dirname,'./src'),
  // entry:'./index.js',
  // context:path.join(__dirname,'./src'),
  // entry:['./index.js','./index3.js'],
  // entry:['./index.js'],
  entry:{
    main:'./src/index.js',
    vendor: ['jquery']
  },
  output:{
    path:path.resolve(__dirname,'dist2'),
    // filename:'bundle.js'
    // filename:'[name].[hash].js'
    // filename:'[name].[chunkhash].js'
    filename:'[name].js'
  },
  resolve:{
    extensions: ['.js', '.vue', '.json'],
    alias:{
      '@':resolve('src'),
      '@img':resolve('src/images')
    }
  },
  module:{
    rules:[
      // js CSS 分离打包
      {
        // test:/\.(scss|css)(\?.*)?$/,   
        test:/\.(sa|sc|c)ss$/,
        // use:ExtractTextPlugin.extract({
        //   use:['css-loader','sass-loader'],
        //   fallback:"style-loader",       
        // })
        use:[
          // {
          //   loader:MiniCssExtractPlugin.loader,
          //   options:{
          //     publicPath:'/dist2',
          //     hmr:!isProd
          //   }
          // },
           'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'

        ]
      },
      // js css 混合打包
      // {
      //   test:/\.(scss|css)(\?.*)?$/,
      //   use:['style-loader','css-loader','sass-loader'],     
      // },
      {
        test:/\.js$/,
        exclude:/node_modules/,
        loader:'babel-loader'
      },
      {
        test:/\.(jpe?g|png|gif)$/,
        use:[
          // {
          //   loader:'file-loader',
          //   options:{
          //     // name:'[name].[ext]',
          //     name(file){
          //       if(isProd){
          //         return '[name].[hash].[ext]'
          //       }
          //       return '[path][name].[ext]'
          //     }
          //   }
          // },
          {
            loader:'url-loader',
            options:{
              limit:8196,
              // name:'[name].[ext]',
              name(file){
                if(isProd){
                  return '[name].[hash].[ext]'
                }
                return '[path][name].[ext]'
              }
            }
          }
        ]
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      title:'webpack test',
      // filename:'newIndex.html',
      template:'./index.html',
      meta:{
        viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'
      },
      hash:true
    }),
    new InlineManifestWebpackPlugin('adddname'),
    new CleanWebpackPlugin(),
    // new ExtractTextPlugin("[name].css"),
    new webpack.BannerPlugin('张三所有'),
    // new UglifyJsPlugin()
    // new MiniCssExtractPlugin({
    //   // filename:'[name].[chunkhash].css',
    //   filename:isProd ? '[name].css' : '[name].css',
    //   chunkFilename:isProd ? '[id].css' : '[id].css',

    // })
  ],
  optimization:{
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        uglifyOptions: {
          compress: {
            // warnings: false,
            drop_debugger: true,
            drop_console: true
          }
        }
      }),
      new OptimizeCSSAssetsPlugin({
        assetNameRegExp: /\.css$/g,
        cssProcessor: require('cssnano'),
        cssProcessorPluginOptions: {
          preset: ['default', { discardComments: { removeAll: false } }],
        },
        canPrint: true
      })
    ],
    // runtimeChunk:{
    //   name:'ansname'
    // }
  },
  devServer:{
    host:'localhost',
    port:8081,
    open:true,
    inline:true,
    overlay:{
      warnings: false, errors: true
    }
  }

}